import React, { useEffect, useRef, useState } from "react";
import lessModule from "./index.module.less"
import { Button, Empty, Modal, Radio, RadioChangeEvent, Space, Table, Upload } from "antd";
import Dragger from "antd/es/upload/Dragger";
import emptyImage from "../../assets/image/homePage-tableEmpty.png"
import featherImage from "../../assets/image/homePage-modalFeather.png"
import infoImage from "../../assets/image/homePage-modalInfo.png"
import { Outlet, useLocation, useNavigate } from "react-router-dom";

// 主页
const HomePage = () => {
    const navigate = useNavigate();
    const location = useLocation()
    // 标签子项类型约束
    interface tabItemInterface {
        label: string,
        router: string,
    }
    // 标签列表
    const tabList = [
        {
            label: "单次推理",
            router: "reasoning"
        },
        {
            label: "滚动监测",
            router: "monitor"
        },
        {
            label: "模型微调",
            router: "fineTuning"
        },
        {
            label: "滚动监测参数配置",
            router: "paramsSetting"
        },
    ]
    // 选中的标签子项路由
    const [tabSelectedRouter, setTabSelectedRouter] = useState<string>("reasoning")
    /**
     * @brief 点击标签子项
     * @param router: string 选中的标签子项路由
     * @return 
     * @note 
     * @warning 
     */
    const click_tabItem = (router: string) => {
        tabSelectedRouter !== router && navigate(router)
    }
    useEffect(() => {
        // 根据当前路由，获取对应的标签子项的名称
        setTabSelectedRouter(location.pathname.split("home/")[1])
    }, [location])
    return (
        <div className={lessModule["homePage"]}>
            <header className={lessModule["homePage-header"]}>
                {
                    tabList.map((item: tabItemInterface, idx: number) => {
                        return (
                            <div key={`tabList_item_${idx}`} className={lessModule["homePage-header__tab"]}
                                style={{
                                    color: tabSelectedRouter === item.router ? "#FFFFFF" : "#B8D6E6",
                                    backgroundColor: tabSelectedRouter === item.router ? "rgba(23,161,230,0.5)" : "rgba(23,161,230,0.1)",
                                    borderColor: tabSelectedRouter === item.router ? "#17A1E6" : "rgba(23,161,230,0.3)",
                                    borderWidth: tabSelectedRouter === item.router ? "0 0 1px 0" : "1px"
                                }}
                                onClick={() => click_tabItem(item.router)} >
                                {item.label}
                            </div>
                        )
                    })
                }
            </header>
            <main className={lessModule["homePage-main"]}>
                <Outlet />
            </main>
        </div>
    )
}

export default HomePage